<template>
  <div class="cake-container">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><span class="breadcrumb-item">蛋糕管理</span></el-breadcrumb-item>
        <el-breadcrumb-item><span class="breadcrumb-item">蛋糕信息</span></el-breadcrumb-item>

      </el-breadcrumb>
    </el-row>
    <el-row>
      <el-form label-width="80px" >

        <el-row>
          <el-col span="8">
            <el-form-item label="蛋糕名称">
              <el-input/>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="蛋糕规格">
              <el-select></el-select>
            </el-form-item>
          </el-col>

          <el-col span="8">
            <el-form-item label="蛋糕口味">
              <el-select></el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col span="8">
            <el-form-item label="蛋糕价格">
              <el-input/>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="----">
              <el-input/>
            </el-form-item>
          </el-col>

          <el-col span="6" offset="2">
            <el-button type="success">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>


    </el-row>
    <el-row>
      <el-table :data="cakes" border>
        <el-table-column prop="cake.name" label="蛋糕名称" width="180"/>
        <el-table-column prop="cake.size.display" label="蛋糕尺寸" width="120"/>
        <el-table-column prop="cakeName" label="主要材料" width="120"/>
        <el-table-column prop="cake.price" label="价格" width="120"/>
        <el-table-column prop="quantity" label="库存数量" width="120"/>
        <el-table-column prop="cakeName" label="销售状态" width="120">
             <template slot-scope="scope">
                {{scope.row.isShelf|saleStatus}}
             </template>
        </el-table-column>

        <el-table-column label="操作" >
            <template slot-scope="scope">
                <el-button type="text">上架</el-button>
                 <el-button type="text">下架</el-button>

            </template>
        </el-table-column>
      </el-table>

    </el-row>
  </div>
</template>

<script>
  export default {
    name: "Basic",
    data: function () {
      return {
        cakes: [
          {
            stock_id:1,
            cake:{
               name:"黑森林001",
               size:{
                  id:17,
                  display:'13寸'

               },price:130.99
            },
            quantity:10,
            isShelf:true
          }
        ]
      }
    },filters:{
      saleStatus(isShelf){
        if(isShelf){
          return "销售中";
        }else{
           return "已下架";
        }
      }
    }
  }
</script>

<style scoped>
  .breadcrumb-item {
    font-weight: bolder !important;
    color: rgba(67, 64, 74, .7);
  }


  .el-form {
    margin-top: 20px;
  }

  .cake-container {
    padding-right: 20px;
  }
</style>
